<script>
import { defineComponent, h } from "vue";
import { AutoIcon, DarkIcon, LightIcon, } from "@theme-hope/modules/outlook/components/icons/index";
import { useDarkmode } from "@theme-hope/modules/outlook/composables/index";
export default defineComponent({
  name: "AppearanceSwitch",
  setup() {
    const { config, status } = useDarkmode();
    const toggleDarkMode = () => {
      if (config.value === "switch")
        status.value = {
          light: "dark",
          dark: "auto",
          auto: "light",
        }[status.value];
      else
        status.value = status.value === "light" ? "dark" : "light";
    };
    return () => h("button", {
      type: "button",
      id: "appearance-switch",
      onClick: () => toggleDarkMode(),
    }, [
      h("div", {
        style: {
          display: status.value === "auto" ? "block" : "none",
          fontSize: "20px",
        },
        title: "跟随主题",
        innerHTML: "🌓",
      }),
      h("div", {
        style: {
          display: status.value === "dark" ? "block" : "none",
          fontSize: "20px",
        },
        title: "暗黑主题",
        innerHTML: "🌛",
      }),
      h("div", {
        style: {
          display: status.value === "light" ? "block" : "none",
          fontSize: "20px",
        },
        title: "明亮主题",
        innerHTML: "🌞",
      }),
    ]);
  },
});
</script>
<style lang="scss" scoped>
@use "vuepress-shared/styles/reset";

.appearance-title {
  display: block;

  margin: 0;
  padding: 0 0.25rem;

  color: var(--light-grey);

  font-weight: 600;
  font-size: 0.75rem;
  line-height: 2;

  transition: color var(--color-transition);
}

#appearance-switch {
  @include reset.button;
  vertical-align: middle;

  padding: 6px;

  color: var(--dark-grey);

  cursor: pointer;

  transition: color var(--color-transition);

  &:hover {
    color: var(--theme-color);
  }

  .icon {
    width: 1.25rem;
    height: 1.25rem;
  }
}


</style>
